export default {
  name: 'am-lazy-img',
  template: `
  <lazy-component @show="handler">
    <am-image :responsive="true" :src="amsrc" />
  </lazy-component>
  `,
  data() {
    return {
      amsrc: '',
      ins: { close() {} },
      isUseLoad: false
    }
  },
  computed: {
    fullLoading() {
      return this.$store.state.fullLoading;
    }
  },
  methods: {
    init() {
      /**定义image动作 */
      const img = new Image();
      img.onload = () => this.amsrc = this.imgsrc;
      if(this.fullLoading === 0) {
        this.isUseLoad = true;
        console.log('open')
        this.$store.commit('setFullLoading', 1);
        this.ins = this.$loading();
      }
      img.src = this.imgsrc;
    },

    /**图片加载完成 */
    handler() {
      if(this.fullLoading === 1 && this.isUseLoad) {
        this.$store.commit('setFullLoading', 0);
      }
    },
  },
  props: ['imgsrc'],
  watch: {
    fullLoading(val, old) {
      if(val === 0) {
        console.log('close');
        this.ins.close();
      }
    }
  },
  mounted() {
    this.init();
  }
}

